<template>
  <div>
    <el-card style="margin: 20px">
      <div>
        <!-- 按钮 -->
        <el-button
          class="add-btn"
          @click="$router.push('/info/warehouse/details/null')"
        >
          新增仓库
        </el-button>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 70vw" stripe>
          <el-table-column
            align="center"
            fixed
            label="序号"
            width="50"
            type="index"
          />
          <el-table-column
            align="center"
            prop="code"
            label="仓库编码"
            width="120"
          />
          <el-table-column
            align="center"
            prop="name"
            label="仓库名称"
            width="100"
          />
          <el-table-column
            align="center"
            prop="type"
            label="仓库类型"
            width="100"
          >
            <template slot-scope="scope">
              {{ warehousetype(scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="location"
            label="省/市/区"
            width="180"
          />
          <el-table-column
            align="center"
            prop="address"
            label="详细地址"
            width="180"
          />
          <el-table-column
            align="center"
            prop="status"
            label="仓库状态"
            width="120"
          >
            <template slot-scope="scope">
              {{ scope.row.status === 0 ? "停用" : "启用" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="surface"
            label="仓库面积/㎡"
            width="100"
          />
          <el-table-column
            align="center"
            prop="includedNum"
            label="库区数量"
            width="100"
          />
          <el-table-column
            align="center"
            prop="personName"
            label="负责人"
            width="100"
          />
          <el-table-column
            align="center"
            prop="phone"
            label="联系电话"
            width="120"
          />
          <el-table-column
            align="center"
            prop="updateTime"
            label="更新时间"
            width="180"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="120"
          >
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/info/warehouse/details/${scope.row.id}`)"
              >
                编辑
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="changeStatus(scope.row.id)"
              >
                {{ scope.row.status === 0 ? "启用" : "停用" }}
              </el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteWarehouse(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <el-pagination
        :page-sizes="[5, 10, 20, 40]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import {
  getWarehousePage,
  getWarehouseDetails,
  editWarehouse,
  delWarehouse
} from '@/api/warehouse'
import { warehousetype } from '../table-data-computed'
export default {
  data() {
    return {
      tableData: [],
      pageConfig: { current: 1, size: 5 },
      total: 0
    }
  },
  computed: { warehousetype },
  created() {
    this.getData()
    // this.getList()
  },
  methods: {
    // 改变仓库状态
    async changeStatus(id) {
      const res = await getWarehouseDetails(id)
      res.data.data.status = Number(!res.data.data.status)
      await editWarehouse(res.data.data)
      this.getData()
      this.$message.success('修改成功')
    },
    // 删除仓库
    deleteWarehouse(id) {
      delWarehouse(id)
      this.$message.success('删除成功')
    },
    // 获取仓库分页数据
    async getData(searchQuery = '') {
      const res = await getWarehousePage(this.pageConfig, searchQuery)
      const { records, total, cuttent, size } = res.data.data
      this.tableData = records
      this.total = Number(total)
      this.pageConfig.current = cuttent
      this.pageConfig.size = size
    },
    // 分页器方法
    handleSizeChange(val) {
      this.pageConfig.size = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageConfig.current = val
      this.getData()
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/styles/table.scss";
</style>
